<template>
    <div class="details-container" v-loading="listLoading">
        <div class="detail-title">
            <div>行业规则：{{ industryName }}<span style="padding-left: 15px; padding-right: 10px;">行业编号：{{ industryId }}</span>
            </div>
            <icon-rule :industryId="industryId"></icon-rule>
            <el-button style="margin-left: 10px;" :disabled="!industryId" v-waves type="primary">
                经典问答
            </el-button>
        </div>

        <div class="page-content">
            <div class="box-chat">
                <div class="container-chat">
                    <div class="box-chat-body" id="resultContent">
                        <div v-for="(item, idx) in chatList" :key="idx" class="item-chat">
                            <img v-if="item.type == 102" class="img-avatar" src="@/assets/images/openai.png" />
                            <img v-if="item.type == 101" class="img-avatar" src="@/assets/images/default_avatar.svg" />
                            <div v-html="item.message"></div>
                        </div>
                        <div class="loading-text" v-if="dotLoading">
                            Ai助手正在思考中
                            <div class="dot">...</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-send">
                <input class="txt-send" v-model="message" placeholder="请输入内容" @keyup.enter="handleSend" />
                <div class="btn-send" @click="handleSend">
                    <img class="img-send" src="@/assets/images/btn_send_arrow.png" />
                </div>
            </div>
        </div>

        <comp-new-modify ref="refNewModify"></comp-new-modify>
        <comp-chat-detail ref="refChatDetail"></comp-chat-detail>
    </div>
</template>
  
<script>

import Pagination from "@/components/Pagination";
import waves from "@/directive/waves"; // waves directive
import CompNewModify from "./components/new_modify_rule.vue";
import { chatMainApi } from "@/api/chatApi"
import IconRule from "./components/icon_rules.vue";
import CompChatDetail from "./components/chat_detail.vue"
import { sendWsData, connect } from "@/utils/websocketHelper"
export default {
    name: "IndustryChat",
    directives: { waves },
    components: {
        Pagination,
        IconRule,
        CompNewModify,
        CompChatDetail
    },
    data() {
        return {
            industryId: "",
            industryName: "",
            chatSessionId: "",

            chatList: [

                // {
                //     message: '你好',
                //     type: 0
                // }, {

                //     message: '你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？',
                //     type: 1
                // }, {
                //     message: '你好',
                //     type: 0
                // }, {

                //     message: '你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？你好！我是您的人力资源部门助手。有什么我可以帮您处理的人事相关事务吗？',
                //     type: 1
                // }
            ],
            message: "",
            dotLoading: false,
            writing: false,
            listLoading: false,
            resultTextStr: '',

        };
    },
    filters: {
        showRuleContent(val) {
            // return Base64.decode(val)
        }
    },
    computed: {
        userInfo() {
            return this.$store.getters.cacheUserInfo
        }
    },
    async mounted() {
        let id = this.$route.query.id;
        let name = decodeURIComponent(this.$route.query.name)
        this.industryId = id;
        this.industryName = name;
        if (id) {
            document.querySelector("#resultContent").addEventListener('scroll', this.scrolling)
            // this.getList();
            this.getChatSession();
            this.scrollToBottom()

        } else {
this.handleClose();
        }


    },
    watch: {
        resultTextStr(newVal, oldVal) {
            this.scrollToBottom();
        }
    },
    methods: {

        async getChatSession() {
            let sessionResult = await chatMainApi(this.Qs.stringify({
                invoke_method: 'get_chat_session_id',
                pre_cmd_para_start_new_session: true
            }))
            this.chatSessionId = sessionResult.big_data || "",
                console.log(sessionResult, this.chatSessionId, 'sessionResult>>>>>>>>>>>>>>>');

        },
        toClassicLog() {
            this.$router.push({
                path: "/industryClassicLog",
                query: { id: this.industryId || "", name: this.industryName || "" },
            });
        },

        async handleSend() {
            // 


            if (this.message) {
                if (this.writing) {
                    return;
                }
                this.writing = true;
                this.chatList.push({
                    type: 101,
                    message: this.message
                })
                this.dotLoading = true;
                let postData = {
                    invoke_method: 'question_and_answer_hangye',
                    pre_cmd_para_id_public_user_info: this.userInfo.id_public_data_admin_user,//this.$store.getters.userId,
                    pre_cmd_para_mid_table_remark_008: this.industryId,
                    pre_cmd_para_session_id: this.chatSessionId,
                }
                let urlParams = []
                for (const key in postData) {
                    let item = postData[key]
                    urlParams.push(`${key}=${item}`)
                }
                let strUrlParams = urlParams.join("&")

                let connectResult = await connect(strUrlParams).catch(err => {
                    console.log("connnectError", err)
                })
                if (connectResult) {
                    let timer = null;
                    let resultText = "";
                    let nextIndex = this.chatList.length;

                    sendWsData(this.message, (event) => {
                        this.dotLoading = false;
                        if (event.data) {
                            this.resultTextStr=event.data;
                            resultText += event.data;
                            if (!this.chatList[nextIndex]) {
                                this.chatList.push({ type: 102, message: resultText })
                            }
                            else {
                                this.chatList[nextIndex].message = resultText;
                            }
                            clearTimeout(timer)

                            timer = setTimeout(() => {
                                // this.resultTextList.push({message:resultText,type:102})
                                this.message = "";
                                this.writing = false
                                console.log(this.resultTextList, "resultTextList>>>>>>>>>>>>>>>>>>>>>>>>>")
                            }, 1500)
                        }
                    })
                }
                else {
                    this.$message.error("连接失败")
                    this.dotLoading = false;
                    this.writing = false;
                }
            }
        },
        handleClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
        scrollToBottom() {
            this.$nextTick(() => {
                var container = this.$el.querySelector("#resultContent");
                container.scrollTop = container.scrollHeight;
            })
        },
        scrolling() {
            let scrollTop = document.querySelector("#resultContent").scrollTop
            // 更新——滚动前，滚动条距文档顶部的距离
            let scrollStep = scrollTop - this.oldScrollTop;
            this.oldScrollTop = scrollTop;
            //判断当前是向上or向下滚动
            if (scrollStep < 0) {
                //向上
                this.scrollFlag = false
            } else {
                this.scrollFlag = true
            }
        }
    },
};
</script>
<style lang="scss" scoped>
@import "../../styles/variables";

.details-container {
    position: absolute;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #101010;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    color: #FFF;
    box-sizing: border-box;

    .page-content {
        position: relative;
        width: 100%;
        flex: 1;
        background-color: #25252B;
        border-radius: 16px;
        box-sizing: border-box;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;

        .box-chat {
            position: relative;
            width: 100%;
            flex: 1;
            padding: 24px 40px;
            box-sizing: border-box;
            overflow: hidden;

            .container-chat {
                position: relative;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .box-chat-body {
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: hidden;
                overflow-y: auto;

                .item-chat {
                    position: relative;
                    width: 100%;
                    display: flex;
                    display: -webkit-flex;
                    flex-direction: row;
                    padding: 20px;
                    border: 1px solid #BBBBBB;
                    border-radius: 16px;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                    font-size: 22px;
                    line-height: 33px;
                    color: #FFF;

                    .img-avatar {
                        position: relative;
                        width: 42px;
                        height: 42px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }

                .loading-text {
                    display: flex;

                    .dot {
                        /*让点垂直居中*/
                        height: 1em;
                        line-height: 1;
                        /*让点垂直排列*/
                        display: flex;
                        flex-direction: column;
                        /*溢出部分的点隐藏*/
                        overflow: hidden;
                    }

                    .dot::before {
                        /*三行三种点，需要搭配white-space:pre使用才能识别\A字符*/
                        content: '...\A..\A.';
                        white-space: pre-wrap;
                        animation: dot 1.5s infinite step-end;
                        /*step-end确保一次动画结束后直接跳到下一帧而没有过渡*/
                    }

                    @keyframes dot {
                        33% {
                            transform: translateY(-2em);
                        }

                        66% {
                            transform: translateY(-1em);
                        }
                    }
                }


            }
        }

        .box-send {
            position: relative;
            width: 100%;
            height: 90px;
            padding-left: 40px;
            padding-right: 40px;
            border-top: 1px solid #FFF;
            box-sizing: border-box;
            flex-shrink: 0;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            align-items: center;

            .txt-send {
                position: relative;
                flex: 1;
                height: 56px;
                line-height: 56px;
                padding-left: 15px;
                padding-right: 15px;
                box-sizing: border-box;
                background-color: transparent;
                border: 1px solid #BDBDBB;
                outline: none;
                color: #FFF;
                border-radius: 10px;
            }

            .btn-send {
                position: relative;
                width: 56px;
                height: 56px;
                background-color: #29AE6D;
                border-radius: 15px;
                margin-left: 15px;
                box-sizing: border-box;
                cursor: pointer;

                .img-send {
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    -webkit-transform: translate(-50%, -50%);
                }
            }

        }
    }
}



.detail-title {
    position: relative;
    width: 100%;
    // border-bottom: 1px solid #e3e3e3;
    padding: 16px 0;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.detail-content {
    padding: 24px 24px 0;

    .el-row {
        margin-bottom: 10px;
    }
}

.other-content {
    .item-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px;
        border: 1px solid #e3e3e3;
        border-bottom: none;

        &:last-child {
            border-bottom: 1px solid #e3e3e3;
        }

        .number-text {
            color: #409eff;
            font-weight: bold;
            margin-top: 12px;
        }

        .el-button {
            background-color: transparent;
            border: none;
            color: #409eff;
        }
    }
}

.wrap-time-fee {
    position: relative;
    width: 100%;

    .item-time-fee {
        position: relative;
        width: 100%;
        display: flex;
        -webkit-display: flex;
        flex-direction: row;
        margin-bottom: 10px;

        .mr10 {
            margin-right: 10px;
        }

        .icon-add-remove {
            font-size: 33px;

            &.el-icon-circle-plus-outline {
                color: #00408d;
            }

            &.el-icon-remove-outline {
                color: #db1010;
            }
        }
    }
}

::v-deep .avatar-uploader {
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        &:hover {
            border-color: #409eff;
        }
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 234px;
        height: 157px;
        line-height: 157px;
        text-align: center;
    }

    .avatar {
        width: 234px;
        height: 157px;
        display: block;
    }
}

.wrap-goods-dec-pics {
    position: relative;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;

    ::v-deep .avatar-uploader {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
</style>
  